<script setup>
import DefinationPage from './DefinationPage.vue';
import { ref, computed, provide } from 'vue'
import { APP_LIST } from '@/constants/appname'
import { getXml, } from '@/api/flowable/defination'
import { editProcess } from '@/api/flowable/form'
import BpmnViewer from '../start/BpmnViewer.vue'
const isDrawerVisiable = ref(false)
const tableData = ref([])
const search = ref('')
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
      data.processName.includes(search.value)
  )
)
// 获取表格数据
import { getFormFlow, delFormAndFlow, changeFormFlowstatus } from '@/api/flowable/form';
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0,
})
async function doGetAllFormFlow() {
  await getFormFlow(pageInfo.value).then((res) => {
    console.log(res)
    tableData.value = res.data.data.records
    pageInfo.value.total = res.data.data.total
  })
}
function changePage(page) {
  pageInfo.value.page = page
  doGetAllFormFlow()
}
doGetAllFormFlow()


async function handleSwitch(row, data) {
  console.log(data, row)
  row.status = data
  // 更新数据库数据
  await changeFormFlowstatus(row.id, data).then(res => {
    console.log('changeFormFlowstatusRes:', res)
  })
}
async function remove(row) {
  console.log(row)
  delFormAndFlow(row.id).then(res => {
    console.log('removeRes:', res)
  })
  doGetAllFormFlow()
}
const flowData = ref('')
const isDialog = ref(false)
async function handleView(row) {
  console.log(row)
  // row里没有deployId
  await getXml(row.flowId).then(res => {
    console.log('getXml:', res)
    flowData.value = res.data.data
    isDialog.value = true
  })
}
// 编辑流程
// const customProcess = ref({})
const customForm = ref({
  formKey: '',
  formContent: {
    "controls": [],
    "props": {
      "labelPosition": "right",
      "labelWidth": 100,
      "size": "default",
      "customClass": "",
      "cols": 12
    }
  },
})
const customXml = ref('')
const sysInfo = ref()
const isEditFlag = ref(false)
provide('isEditFlag', isEditFlag)
async function handleEditProcess(row) {
  console.log('row', row)
  await editProcess(row.id).then(res => {
    console.log('editProcessRes:', res)
    sysInfo.value = res.data.data.process
    customForm.value.formKey = res.data.data.customForm.key
    customForm.value.formContent = JSON.parse(res.data.data.customForm.formContent)
    customXml.value = res.data.data.xml
  })
  isEditFlag.value = true
  isDrawerVisiable.value = true
}

function handleStartProcess() {
  isEditFlag.value = false
  isDrawerVisiable.value = true
  customForm.value = {
    formKey: '',
    formContent: {
      "controls": [],
      "props": {
        "labelPosition": "right",
        "labelWidth": 100,
        "size": "default",
        "customClass": "",
        "cols": 12
      }
    },
  }
  customXml.value = ''
  sysInfo.value = {}
}
</script>

<template>
  <div class="body">
    <el-alert title="注意：如对应流程已使用，请尽量不要删除流程，否则已完成流程会丢失流程名称！" type="success"></el-alert>
    <el-row>
      <el-table :data="filterTableData" fit>
        <el-table-column header-align="center" align="center" prop="prop" type="index" label="序号"
          width="100px"></el-table-column>
        <el-table-column align="center" prop="processName" label="名称"></el-table-column>
        <el-table-column align="center" prop="appName" label="归属系统">
          <template #default="scope">
            {{ APP_LIST.filter(item => item.code === scope.row.appName)[0].name }}
          </template>

        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
        <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column align="center" prop="prop" label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.status" class="ml-2" inline-prompt active-text="启用" inactive-text="停用"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="启用"
              inactive-value="停用" @change="handleSwitch(scope.row, $event)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="400">
          <template #header>
            <div style="display: flex;">
              <el-input v-model="search" placeholder="搜索流程名称" clearable />
              <el-button type="primary" icon="edit" @click="handleStartProcess"
                style="margin-left: 30px;">新增</el-button>
            </div>

          </template>
          <template #default="scope">
            <el-tooltip effect="dark" content="流程图预览" placement="bottom-end">
              <el-icon color="var(--el-color-primary)" size="18" @click="handleView(scope.row)">
                <View />
              </el-icon>
            </el-tooltip>

            <el-tooltip effect="dark" content="修改" placement="bottom-end">
              <el-icon color="var(--el-color-primary)" size="18" @click="handleEditProcess(scope.row)">
                <Edit />
              </el-icon>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="bottom-end">
              <el-icon color="var(--el-color-primary)" size="18" @click="remove(scope.row)">
                <Delete />
              </el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout=" prev, pager, next" background :current-change="changePage">
      </el-pagination>
    </el-row>


  </div>

  <el-drawer class="drawer" v-model="isDrawerVisiable" :with-header="false" direction="rtl" size="100%"
    :close-on-press-escape="false">
    <DefinationPage v-model:isDrawerVisiable="isDrawerVisiable" @doGetAllFormFlow="doGetAllFormFlow"
      v-model:customForm="customForm" v-model:customXml="customXml" v-model:sysInfo="sysInfo" :isEditFlag="isEditFlag">
    </DefinationPage>
  </el-drawer>
  <el-dialog v-model="isDialog" style="height: 50%;">
    <BpmnViewer :flowData="flowData"></BpmnViewer>
  </el-dialog>
</template>

<style scoped lang="less">
.body {
  height: 500px;
  width: 100%;
  margin: 20px 20px;

  .el-icon {
    margin: 0 10px;
    cursor: pointer;
  }
}

.steps {
  display: flex;
  align-items: center;
  // width: 80%;
  margin: 0 auto;

  .el-button {
    margin: 0 50px;
  }
}
</style>
